import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return ListView(
      children: 
        listData.map((value){
           return Card(
                margin: EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[
                    AspectRatio(
                      aspectRatio: 20 / 9,
                      child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
                    ),
                    ListTile(
                      leading: CircleAvatar(  //CircleAvatar 只要用于头像 更好
                        backgroundImage:NetworkImage(value["imageUrl"]) ,
                      ),
                      // leading: ClipOval(
                      //   child:Image.network(value["imageUrl"],fit: BoxFit.cover,height: 60,width: 60,) ,
                      // ),
                      title: Text(value["title"]),
                      subtitle: Text(value["author"]),
                    )
                  ],
                ),
              );
        }).toList()
      ,
    );
  } 
}

class Cards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return ListView(
      children: <Widget>[
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('张三',style: TextStyle(fontSize: 30),),
                  subtitle: Text("高级工程师"),
                ),
                ListTile(
                  title: Text('电话')
                ),
                ListTile(
                  title: Text('地址')
                )
              ],
            ),
          )
      ],
    );
  } 
}

class AspectRatios extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return  Container(
      width: 300,
      child: AspectRatio(
        aspectRatio:2.0/1.0, //相当于占父元素的等比
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  } 
}